<%@ page language="java" import="java.util.*" contentType="text/html;charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题文档</title>
<style type="text/css">
<!--
body {
    
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
.STYLE1 {font-size: 12px}
.STYLE3 {font-size: 12px; font-weight: bold; }
.STYLE4 {
	color: #03515d;
	font-size: 12px;
}
-->
</style>

<!-- Video -->
<link rel="stylesheet" href="common/html5-video/demo1/style.css" />
<link rel="stylesheet" href="common/kindeditor-4.1.3/themes/default/default.css" />
<script charset="utf-8" src="common/kindeditor-4.1.3/kindeditor.js"></script>
	<script>
		KindEditor.ready(function(K) {
				editor = K.create('textarea[name="content"]', {
				    cssPath : 'common/kindeditor-4.1.3/plugins/code/prettify.css',
				    uploadJson : 'uploadDemoAction!uploadImage.action',
				    fileManagerJson : 'common/kindeditor-4.1.3/jsp/file_manager_json.jsp',
				    items : ['fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
						'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
						'insertunorderedlist', '|', 'emoticons', 'image', 'link'],
				    
					allowFileManager : true,
					afterCreate : function() { 
                      this.sync(); 
                     }, 
                    afterBlur:function(){ 
                      this.sync(); 
                    }    
				});
			var editor = K.editor({
			    cssPath : 'common/kindeditor-4.1.3/plugins/code/prettify.css',
				uploadJson : 'uploadDemoAction!uploadImage.action',
				fileManagerJson : 'common/kindeditor-4.1.3/jsp/file_manager_json.jsp',
					allowFileManager : true
				});
				K('#upload_picture_button').click(function() {
					editor.loadPlugin('image', function() {
						editor.plugin.imageDialog({
							showRemote : false,
							imageUrl : K('#headImage').val(),
							clickFn : function(url, title, width, height, border, align) {
								K('#headImage').val(url);
								var localImagId = document.getElementById("headImageView");
                                    localImagId.src=url;
								editor.hideDialog();
							}
						});
					});
				});
				K('#add_picture_button').click(function() {
					editor.loadPlugin('image', function() {
						editor.plugin.imageDialog({
							imageUrl : K('#headImage').val(),
							clickFn : function(url, title, width, height, border, align) {
								K('#headImage').val(url);
								var localImagId = document.getElementById("headImageView");
                                    localImagId.src=url;
								editor.hideDialog();
							}
						});
					});
				});
				K('#upload_video_button').click(function() {
					editor.loadPlugin('image', function() {
						editor.plugin.imageDialog({
							showRemote : false,
							imageUrl : document.getElementById("addressVideoUrl").value,
							clickFn : function(url, title, width, height, border, align) {
								//K('#addressVideoUrl').val(url);
								var addressVideoUrl=document.getElementById("addressVideoUrl");
								addressVideoUrl.value=url;
								editor.hideDialog();
							}
						});
					});
				});
				K('#add_video_button').click(function() {
					editor.loadPlugin('image', function() {
						editor.plugin.imageDialog({
							imageUrl : document.getElementById("addressVideoUrl").value,
							clickFn : function(url, title, width, height, border, align) {
								//K('#addressVideoUrl').val(url);
								var addressVideoUrl=document.getElementById("addressVideoUrl");
								addressVideoUrl.value=url;
								editor.hideDialog();
							}
						});
					});
				});
				K('#add_picture_button2').click(function() {
					editor.loadPlugin('image', function() {
						editor.plugin.imageDialog({
							//imageUrl : K('#url1').val(),
							clickFn : function(url, title, width, height, border, align) {
								AddElement(url,title);
								editor.hideDialog();
							}
						});
					});
				});
				K('#upload_picture_button2').click(function() {
					editor.loadPlugin('image', function() {
						editor.plugin.imageDialog({
							showRemote : false,
							//imageUrl : K('#headImage').val(),
							clickFn : function(url, title, width, height, border, align) {
								AddElement(url,title);
								editor.hideDialog();
							}
						});
					});
				});
		});
	</script>
	<script language="javascript">
        var SelObj = null;
        function AddElement(url,title)
        {
            var oImg             = document.createElement("IMG");
            oImg.src             = url;
            oImg.width            = 180;
            oImg.height            = 129;
            oImg.title=title;
            oImg.style.cursor    = "hand";
            oFrame.appendChild(oImg);
        }
        function DelElement()
        {
            oFrame.removeChild(SelObj);            
        }
        function SelectImage()
        {
            if(window.event.srcElement.tagName=="IMG")
            {
                if(SelObj!=null)
                {
                    SelObj.border = 0;
                }
                window.event.srcElement.border = 2;
                SelObj = window.event.srcElement;
            }
        }
        function document_onload()
        {
            //document.all.oAddButton.onclick = AddElement;
            document.all.oDelButton.onclick = DelElement;
            document.all.oFrame.onclick        = SelectImage;
        }
        function getDivChild(){
         var childCount =oFrame.childElementCount;
         var imglist=oFrame.getElementsByTagName('IMG') 
           alert(imglist.length);
           for(var i = 0; i < imglist.length; i ++){
              alert(imglist[i].src);
           }
        }
    </script>
    <script>
     function validateForm(){
     var localVar = document.getElementById("newsInfotitle");
      if(localVar.value.length<5||localVar.value.length>50)
       {
           alert("标题不能少于5个字符或不超过50个字符！");
           localVar.focus();
           return false;
       }
      localVar = document.getElementById("newsInfo_subtitle");
      if(localVar.value.length<5||localVar.value.length>50)
       {
           alert("副标题不能少于5个字符或不超过50个字符！");
           localVar.focus();
           return false;
       }
       
     var stringStr="";
       var imglist=oFrame.getElementsByTagName('IMG') 
       for(var i = 0; i < imglist.length; i ++){
              //alert(imglist[i].src);
              stringStr=stringStr+imglist[i].src+";"+imglist[i].title+",";
        }
       if(stringStr==""){
           alert("你没有选择图片");
           return false;
       }    
       
       document.getElementById("hindGroupImagInfo").value=stringStr;
       return true;  
       
     }
    </script>
    
</head>

<body onload="document_onload();">
<table width="99%" border="0" cellspacing="0" cellpadding="0" align="left" background="common/html5-video/bg.jpg">
  <tr>
    <td height="30" background="tab/images/tab_05.gif"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="12" height="30"><img src="tab/images/tab_03.gif" width="12" height="30" /></td>
        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="80%" valign="middle"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="5%"><div align="center"><img src="tab/images/tb.gif" width="16" height="16" /></div></td>
                <td width="95%" class="STYLE1"><div align="center">创建图片信息信息</div></td>
              </tr>
            </table></td>
            <td width="54%">
			    &nbsp;
			</td>
          </tr>
        </table>

            
        <td width="16"><img src="tab/images/tab_07.gif" width="16" height="30" /></td>
      </tr>
    </table></td>
  </tr>
  <s:form  action="newsAction!pictureNewsInfoAdd.action" method="post" theme="simple" onsubmit="return validateForm();">
   <s:hidden name="hindGroupImagInfo" id="hindGroupImagInfo"/>
   <s:hidden name="newsInfo.id" id="hindGroupImagInfo"/>
    <input type="hidden" name="headImage" id="headImage" value="${headImage}"/>
   <tr>
      <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="8" background=" tab/images/tab_12.gif">&nbsp;</td>
        <td width="400">
		<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="b5d6e6" onmouseover="changeto()"  onmouseout="changeback()">
           <tr>          
            <td height="30" bgcolor="#FFFFFF"><div align="right"><span class="STYLE1">信息图标</span></div></td>
            <td height="30" bgcolor="#FFFFFF"><div align="left"><span class="STYLE1">
               <s:hidden name="newsInfo.headImg" id="headImage"/>
               <img id="headImageView"   src="${headImage}" alt="" width="65px" height="50px"/>&nbsp;
               <input type="button" name="upload_picture_button" id="upload_picture_button" value="上传图片"/>&nbsp;
               <input type="button" name="add_picture_button" id="add_picture_button" value="添加图片"/> </span></div>
           </td>
           </tr>
           <tr>          
            <td height="30" bgcolor="#FFFFFF"><div align="right"><span class="STYLE1">信息标题</span></div></td>
            <td height="30" bgcolor="#FFFFFF"><div align="left"><s:textfield name="newsInfo.title" id="newsInfotitle"  cssStyle="width:99%;height:20px;"/> <s:fielderror cssStyle="color:red"><s:param>realNameError</s:param></s:fielderror></div></td>
           </tr>
		    <tr>          
            <td height="30" bgcolor="#FFFFFF"><div align="right"><span class="STYLE1">信息副标题</span></div></td>
            <td height="30" bgcolor="#FFFFFF"><div align="left"><s:textfield name="newsInfo.subtitle" id="newsInfo_subtitle" cssStyle="width:99%;height:20px; "/></div></td>
           </tr>
           
		    <tr>          
            <td height="30" bgcolor="#FFFFFF"><div align="right"><span class="STYLE1">显示序号</span></div></td>
            <td height="30" bgcolor="#FFFFFF"><div align="left"><s:textfield name="newsInfo.oderView" id="newsInfooderView" cssStyle="height:30px;height:20px"/><span class="STYLE1">(请输入数字)</span></div></td>
           </tr>
           <tr>          
            <td height="30" bgcolor="#FFFFFF" ><div align="right"><span class="STYLE1">描述</span></div></td>
            <td height="30" bgcolor="#FFFFFF" ><textarea name="content" style="width:310px;height:210px;visibility:hidden;" >&nbsp;</textarea></td>
           </tr>
           
           <tr>          
            <td height="30" bgcolor="#FFFFFF"><div align="right"><span class="STYLE1">状态</span></div></td>
            <td height="30" bgcolor="#FFFFFF"><div align="left"><span class="STYLE1"><s:radio list="#{'0':'暂不发布','1':'发布'}" name="newsInfo.state"/></div></td>
           </tr>
           
		   <tr>          
            <td height="30" bgcolor="#FFFFFF"  colspan="2"><div align="center"><input type="submit"  title="提交"/><s:if test="newsInfo.id!=null">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button"  value="返回" onclick="history.back();" /></s:if> </div></td>
           </tr>
        </table>
       
        </td>
        <td >
          <table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="b5d6e6" onmouseover="changeto()"  onmouseout="changeback()">
           <tr>          
            <td height="30" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">图片信息 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input type="button" name="upload_picture_button2" id="upload_picture_button2" value="上传图片"/>&nbsp;<input type="button" name="add_picture_button2" id="add_picture_button2" value="添加图片"/>&nbsp; <input id="oDelButton" type="button" value="删除图片" /></span></div></td>
           </tr>
           <tr>
             <td height="30" bgcolor="#FFFFFF" rowspan="5" align="left" style="width:400px;height:400px;" >
              <!-- 内容 -->
                   <div id="oFrame" style="width:100%;height:100%;" >
                      <s:iterator value="#request.infoContentPictures">
                        <IMG src="${pictureAddress}" alt="" width="180" height="129" />
                      </s:iterator>
                   </div>
               <!-- 内容结束 -->
             </td>
          </tr>
        </table>
        </td>
         </s:form>
        <td width="8" background="tab/images/tab_15.gif">&nbsp;</td>
      </tr>
    </table></td>
  </tr>
  
 <!-- <tr>&nbsp;</tr>-->
  <tr>
    <td height="35" background="tab/images/tab_19.gif"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="12" height="35"><img src="tab/images/tab_18.gif" width="12" height="35" /></td>
        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td class="STYLE4">&nbsp;&nbsp</td>
            <td><span class="STYLE1"></span>&nbsp;</td>
          </tr>
        </table></td>
        <td width="16"><img src="tab/images/tab_20.gif" width="16" height="35" /></td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>

